import { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import { PhoneOutlined, LockOutlined, LeftCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { adminLoginApi } from '@/api/user';
import useAdminInfoStore from '@/store/adminInfoStore';

interface LoginForm {
  phone: string;
  password: string;
}

/**
 * 管理员登录页面
 * @returns
 */
const Login = () => {
  const { setAdminInfo, setToken } = useAdminInfoStore();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const [form] = Form.useForm();

  // 管理员登录逻辑
  const handleLogin = async (values: LoginForm) => {
    setLoading(true);
    // 这里调用登录接口
    const res = await adminLoginApi(values);
    // 登录成功
    if (res.code === 200) {
      // 保存管理员信息到本地存储中
      localStorage.setItem('adminInfo', JSON.stringify(res.data.userInfo));
      localStorage.setItem('token', res.data.token);
      // 保存管理员信息到 store 中
      setAdminInfo(res.data.userInfo);
      setToken(res.data.token);
      message.open({
        type: 'success',
        content: '登录成功！',
      });
      navigate('/admin/home');
    } else {
      message.open({
        type: 'error',
        content: '登录失败，请重试！',
      });
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-800 via-emerald-700 to-emerald-600 flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden">
        {/* 顶部装饰 */}
        <div className="h-2 bg-gradient-to-r from-emerald-400 to-emerald-600"></div>
        {/* Logo区域 */}
        <div className="text-center pt-8 pb-4 relative">
          <div
            className="absolute top-2 left-2 cursor-pointer"
            onClick={() => navigate('/')}
          >
            <LeftCircleOutlined style={{ fontSize: '30px', color: '#10b981' }} />
          </div>
          <div className="w-16 h-16 bg-emerald-100 rounded-full mx-auto flex items-center justify-center mb-4">
            <span className="text-emerald-700 text-3xl font-bold">菌</span>
          </div>
          <h2 className="text-2xl font-bold text-gray-800">后台管理系统</h2>
          <p className="text-gray-500 mt-2">云南野生菌科普交易平台</p>
        </div>

        {/* 表单区域 */}
        <div className="p-8 pt-4">
          <Form
            form={form}
            name="adminLogin"
            onFinish={handleLogin}
            className="mt-4"
          >
            <Form.Item
              name="phone"
              rules={[
                { required: true, message: '请输入手机号！' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号！' },
              ]}
            >
              <Input
                prefix={<PhoneOutlined className="text-gray-400" />}
                placeholder="请输入手机号"
                size="large"
                className="rounded-lg !border-gray-300 hover:!border-emerald-500 focus:!border-emerald-500 focus:!shadow-[0_0_0_2px_rgba(16,185,129,0.1)]"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码！' }]}
            >
              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="请输入密码"
                size="large"
                className="rounded-lg !border-gray-300 hover:!border-emerald-500 focus:!border-emerald-500 focus:!shadow-[0_0_0_2px_rgba(16,185,129,0.1)]"
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                className="w-full h-10 bg-emerald-600 hover:bg-emerald-700 rounded-lg !border-none"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>

        {/* 底部信息 */}
        <div className="text-center pb-6 text-sm text-gray-500">
          <p>仅限管理员访问</p>
        </div>
      </div>
    </div>
  );
};

export default Login;
